<template>
    <div>
        <div class="fillcontain" v-if="deviceManageIsShow">

            <div class="bus_b">

            <h2 class="title">电盒列表</h2>

            <div class="sensor_list groupInfo_list_nav">
                <div class="count_box padding_l_no">
                    <span class="bt">设备总数：</span>
                    <span class="num">5</span>
                </div>
                <div class="count_box">
                    <span class="bt dots_green">启用设备数：</span>
                    <span class="num">4</span>
                </div>
                <div class="count_box borde_r_no">
                    <span class="bt dots_red">在线设备数：</span>
                    <span class="num">3</span>
                </div>

                <el-button type="primary" size="small" class="btn refresh">刷新</el-button>

            </div>

            </div>


            <div class="table_container">
                <div class="tab_search clearfix">
                    <div class="fl">
                        <div class="search_inp el-input">
                            <input type="text" autocomplete="off" placeholder="请输入设备ID/设备名称/MAC地址" class="el-input__inner">
                        </div> 
                        <button type="button" class="el-button el-button--primary">
                            <i class="search"></i>
                            <span>搜索</span>
                        </button>
                    </div> 
                    <div class="fr">
                        <el-dropdown trigger="click" @command="handleCommand">
                            <el-button>
                                <span>批量操作</span>
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown" size="small">
                                <el-dropdown-item command="b_addDevice">批量添加设备</el-dropdown-item>
                                <el-dropdown-item command="b_addSensor">批量绑定传感器</el-dropdown-item>
                                <el-dropdown-item command="b_backups">批量设置备份</el-dropdown-item>
                                <el-dropdown-item command="b_cycle">批量配置周期</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <el-button type="primary" icon="el-icon-plus" @click="addDevice()" size="small">添加设备</el-button>
                    </div>
                </div>
                    <el-table
                        :data="powerBoxList"
                        size="small"
                        style="width: 100%">
                        <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column>
                        <el-table-column
                            prop="pb_id"
                            label="设备ID"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="pb_name"
                            label="设备名称"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop=""
                            label="设备类型">
                            电盒
                        </el-table-column>
                        <el-table-column
                            prop="alarmStatus"
                            label="告警状态">
                            正常
                        </el-table-column>
                        <el-table-column
                            prop="onlineStatus"
                            label="在线状态">
                            在线
                        </el-table-column>
                        <el-table-column
                            prop="onStatus"
                            label="启用状态">
                        </el-table-column>
                        <el-table-column
                            prop="mac"
                            label="MAC地址">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="small" type="text" @click="viewDevice()">查看</el-button>
                                <el-button size="small" type="text" @click="updateDevice()">修改</el-button>
                                <el-dropdown @command="handlerMore" trigger="click">
                                    <span class="el-dropdown-link">
                                        更多<i class="el-icon-arrow-down el-icon--right"></i>
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item command="restart">重启</el-dropdown-item>
                                        <el-dropdown-item command="forbidden">禁用</el-dropdown-item>
                                        <el-dropdown-item command="on">开机</el-dropdown-item>
                                        <el-dropdown-item command="backups">备份</el-dropdown-item>
                                        <el-dropdown-item command="sync">同步</el-dropdown-item>
                                        <el-dropdown-item command="del">删除</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </template>
                            </el-table-column>
                    </el-table>

                    <!--分页-->
                    <div class="Pagination">
                        <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page="currentPage" 
                        :page-size="pageSize"
                        layout="total, prev, pager, next"
                        :total="count">
                        </el-pagination>
                    </div>

            </div>
            <!--批量添加设备-->
            <badd-device ref="bAddDeviceRef" v-if="bAddDeviceDialog.show" :isShow="bAddDeviceDialog.show"  @closeDialog="hideBaddDeviceDialog" title="批量添加设备"></badd-device>
            <!--批量绑定传感器-->
            <bbind-sensor ref="bBindSensorRef" v-if="bBindSensorDialog.show" :isShow="bBindSensorDialog.show" @closeDialog="hideBbindSensorDialog" title="批量绑定传感器"></bbind-sensor>
            <!--批量设置备份-->
            <bbackups ref="bBackupsRef" v-if="bBackupsDialog.show" :isShow="bBackupsDialog.show" @closeDialog="hideBbackupsDialog" title="批量设置备份"></bbackups>
            <!--批量配置周期-->
            <b-cycle ref="bCycleRef" v-if="bCycleDialog.show" :isShow="bCycleDialog.show" @closeDialog="hideBcycleDialog" title="批量配置周期"></b-cycle>
            <!--添加设备-->
            <add-device ref="addDeviceRef" v-if="addDeviceDialog.show" :isShow="addDeviceDialog.show" @closeDialog="hideAddDeviceDialog" title="添加设备"></add-device>
            <!--数据备份-->
            <bbackups-finished ref="backupsFinishRef" v-if="backupsFinishDialog.show" :isShow="backupsFinishDialog.show"  @closeDialog="hideBbackupsFinishDialog" title="设置备份"></bbackups-finished>
            <!--数据同步-->
            <sync v-if="syncDialog.show" :isShow="syncDialog.show"  @closeDialog="hideSyncDialog" title="数据同步"></sync>
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
import { getPowerboxList } from "@/api/powerBox";
import BaddDevice from '@/components/dialog/bAddDevice.vue'
import BbindSensor from '@/components/dialog/bBindSensor.vue'
import Bbackups from '@/components/dialog/bBackups.vue'
import bCycle from '@/components/dialog/bCycle.vue'
import AddDevice from '@/components/dialog/addDevice.vue'
import BbackupsFinished from '@/components/dialog/bBackupsFinish'
import Sync from '@/components/dialog/sync'
export default {
  data() {
    return {
        deviceManageIsShow: true,
        deviceInfo: {show: false},
        bAddDeviceDialog:{  
            show: false
        },
        bBindSensorDialog: {
            show: false
        },
        bBackupsDialog: {
            show: false
        },
        bCycleDialog: {
            show: false
        },
        backupsFinishDialog: {
            show: false
        },
        addDeviceDialog: {show: false},
        syncDialog: {show: false},
        currentPage: 1, //当前页
        pageSize: 3,
        count: 0, //总记录数
        originPowerList: [],
        powerBoxList: [
            {
                id: "",
                name: "",
                mode: "",
                alarmStatus: "",
                onlineStatus: "",
                onStatus: "",
                mac: ""
            }
        ]
    };
  },
  components: {BaddDevice, BbindSensor, Bbackups, bCycle, AddDevice, BbackupsFinished, Sync},
  watch:{
    $route(to,from){
        if(to.path == '/electricBoxManage/deviceManage') {
            this.deviceManageIsShow = true
        } else if(to.path == '/electricBoxManage/deviceManage/deviceDetail'){
            this.deviceManageIsShow = false
        }
    }
  },
  created() {
      
  },
  mounted() {
      var that = this
      if(this.$route.path == '/electricBoxManage/deviceManage/deviceDetail') {
          this.deviceManageIsShow = false
      }
      that._getPowerboxList()
  },
  methods: {
    //获取电盒列表
    _getPowerboxList() {
        var that = this
        getPowerboxList({}).then((res) => {
           if(res.code == 1) {
               that.originPowerList = res.result //存储电盒总数据
               var origin = JSON.parse(JSON.stringify(res.result))
               that.powerBoxList = that.handlePowerboxListData(origin)
               that.count = res.result.length
           }
        })
    },
    //处理电盒列表数据，按页显示
    handlePowerboxListData(datas) {
        var that = this
        var temp;
        if(that.currentPage == that.originPowerList.length) {
            temp = datas.slice(that.currentPage - 1)
        } else {
            temp = datas.slice(that.currentPage - 1, that.pageSize)
        }
       
        return temp;
    },
    handleCurrentChange(val) {
      var that = this
      that.currentPage = val
      that.powerBoxList = that.handlePowerboxListData(that.originPowerList)
    },
    handleCommand(command) {
         if(command == 'b_addDevice') {
             this.bAddDeviceDialog.show = true
         } else if (command == 'b_addSensor') {
             this.bBindSensorDialog.show = true
         } else if(command == 'b_backups') {
             this.bBackupsDialog.show = true
         } else if(command == 'b_cycle') {
             this.bCycleDialog.show = true
         }
    },
    //隐藏批量添加设备弹窗
    hideBaddDeviceDialog() {
        this.bAddDeviceDialog.show = false
    },
    //隐藏批量绑定传感器弹窗
    hideBbindSensorDialog() {
        this.bBindSensorDialog.show = false
    },
    //隐藏批量设置备份弹窗
    hideBbackupsDialog() {
        this.bBackupsDialog.show = false
    },
    hideBbackupsFinishDialog() {
        this.backupsFinishDialog.show = false
    },
    //隐藏批量配置周期弹窗
    hideBcycleDialog() {
        this.bCycleDialog.show = false
    },
    //隐藏添加设备弹窗
    hideAddDeviceDialog() {
        this.addDeviceDialog.show = false
    },
    //隐藏数据同步弹窗
    hideSyncDialog() {
        this.syncDialog.show = false
    },
    //查看设备
    viewDevice() {
        this.deviceManageIsShow = false
        this.$router.push('/electricBoxManage/deviceManage/deviceDetail')
    },
    //添加设备
    addDevice() {
         this.addDeviceDialog.show = true
    },
    //修改设备
    updateDevice() {
        this.addDeviceDialog.show = true
    },
    //处理更多
    handlerMore(command) {
        if(command == 'restart') {
            this.$confirm('确定要重启设备吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                closeOnClickModal: false
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '设备重启成功!'
                });
            }).catch(() => {});
        } else if(command == 'forbidden') {
            this.$confirm('确定要禁用设备吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                closeOnClickModal: false
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '设备已禁用!'
                });
            }).catch(() => {});
        } else if(command == 'on') {
            this.$confirm('确定要开启设备吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                closeOnClickModal: false
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '设备已开机!'
                });
            }).catch(() => {});
        } else if (command == 'backups') {
            this.backupsFinishDialog.show = true
        } else if (command == 'sync') {
            this.syncDialog.show = true
        } else if(command == 'del'){
            this.$confirm('确定要删除设备吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                closeOnClickModal: false
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '设备删除成功!'
                });
            }).catch(() => {});
        }
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../style/table.less";
</style>

